<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<meta charset="UTF-8">
	<title>图表</title>
	<!-- 引入echarts.js -->
	<script  type="text/javascript" src="${ctxStatic}/echarts/echarts.min.js"></script>
</head>
<body>
<!-- 为Echarts准备一个具备大小(宽高)的dom -->
	<div id="main" style="height: 595px;width: 1000px; margin: 10px auto 0 auto;">
	    
	</div>
	<script type="text/javascript">
	// 基于准备好的dom,初始化echarts实例
	var myChart = echarts.init(document.getElementById('main'));
	// 指定图标配置项数据
	var option = {
	    tooltip : {
	        trigger: 'axis',
	        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
	            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
	        }
	    },
	  //工具箱
		toolbox: {
	       show: true,
	       feature: {
	          dataZoom: {
	              yAxisIndex: 'none'
	          },
	          dataView: {readOnly: true},
	          magicType: {type: ['line', 'bar']}
	       }
        },
	    legend: {
	    	align: 'left',
	        data:['期初库存','领取/购进','下级退回','下发/售出','退回上级','报废','使用','报损','期末库存']
	    },
	    grid: {
	        left: '3%',
	        right: '4%',
	        bottom: '3%',
	        containLabel: true
	    },
	    xAxis : [
	        {
	            type : 'category',
	            data : JSON.parse('${fns:toJson(nameList)}'),
	            axisLabel:{
	            	interval:0,//横轴信息全部显示 
	                rotate:45, //刻度旋转45度角
	                textStyle:{
	                	fontSize:12 
	             		}
	  			}
	        }
	    ],
	    yAxis : [
	        {
	            type : 'value'
	        }
	    ],
	    series : [
	        {
	            name:'期初库存',
	            type:'bar',
	            stack: '数据',
	            barMaxWidth:30,//最大宽度
	            data:JSON.parse('${fns:toJson(histroyList)}')
	        },
	        {
	            name:'领取/购进',
	            type:'bar',
	            stack: '数据',
	            barMaxWidth:30,//最大宽度
	            data:JSON.parse('${fns:toJson(orderInList)}')
	        },
	        {
	            name:'下级退回',
	            type:'bar',
	            stack: '数据',
	            barMaxWidth:30,//最大宽度
	            data:JSON.parse('${fns:toJson(orderFromReturnList)}')
	        },
	        {
	            name:'下发/售出',
	            type:'bar',
	            stack: '数据',
	            barMaxWidth:30,//最大宽度
	            data:JSON.parse('${fns:toJson(orderSellList)}')
	        },
	        {
	            name:'退回上级',
	            type:'bar',
	            stack: '数据',
	            barMaxWidth:30,//最大宽度
	            data:JSON.parse('${fns:toJson(orderReturnList)}')
	        },
	        {
	            name:'报废',
	            type:'bar',
	            stack: '数据',
	            barMaxWidth:30,//最大宽度
	            data:JSON.parse('${fns:toJson(orderRejectList)}')
	        },
	        {
	            name:'使用',
	            type:'bar',
	            stack: '数据',
	            barMaxWidth:30,//最大宽度
	            data:JSON.parse('${fns:toJson(orderUseList)}')
	        },
	        {
	            name:'报损',
	            type:'bar',
	            stack: '数据',
	            barMaxWidth:30,//最大宽度
	            data:JSON.parse('${fns:toJson(orderLossList)}')
	        },
	        {
	            name:'期末库存',
	            type:'bar',
	            stack: '数据',
	            barMaxWidth:30,//最大宽度
	            data:JSON.parse('${fns:toJson(nowProList)}')
	        }
	    ]
	};

// 使用刚刚指定的配置项和数据显示图表
myChart.setOption(option);
	</script>

</body>
</html>